<template>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24">
            <div class="ibox">
                <div class="ibox-title">
                <h5>缺陷收敛曲线</h5> 
                </div>
                <div class="ibox-content" style="height: 420px;">
                    <ve-histogram :data="chartDailyData" :settings="chartDailySettings" :data-zoom="dataZoom">
                        <div class="data-empty" v-if="!isDisplay(chartDailyData.rows)">没有数据😂</div>
                    </ve-histogram> 
                </div>
            </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24">
            <div class="ibox">
                <div class="ibox-title">
                <h5>日数据汇总</h5> 
                </div>
                <div class="ibox-content">
                    <el-table
                        ref="filterTable"
                        :data="chartDailyData.rows.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                        style="width: 100%">
                        <el-table-column prop="date" label="日期" min-width="60" sortable></el-table-column>
                        <el-table-column prop="new_create" min-width="" label="新增缺陷(个)"></el-table-column>
                        <el-table-column prop="resolved" min-width="" label="已解决缺陷(个)	"></el-table-column>
                        <el-table-column prop="closed" min-width="" label="已关闭缺陷(个)	"></el-table-column>
                        <el-table-column prop="total_new" min-width="" label="累计新增缺陷(个)"></el-table-column>
                        <el-table-column prop="total_resolved" min-width="100" label="累计解决缺陷(个)"></el-table-column>
                        <el-table-column prop="total_closed" min-width="" label="累计关闭缺陷(个)"></el-table-column>
                        <el-table-column prop="total_legacy" min-width="" label="累计遗留缺陷(个)"></el-table-column>
                        <!-- <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="sub">
                                <el-button type="text" size="small" @click="goto_url_blank(sub.row)">查看详情</el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                    <el-pagination
                        style="padding-top: 10px;"
                        background
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        layout="total, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import { mapState } from 'vuex'
import { getHeader } from '@/app.config'

export default {
    // props: {
    //     filters: Object
    // },
    computed: {
        ...mapState({
            filters: state => state.filters
        })
    },
    data() {
        return {
            dataZoom: [
                {
                    type: 'slider',
                    start: 0,
                    end: 100
                }
            ],
            chartDailySettings: {
                showLine: ['total_new', 'total_resolved', 'total_closed', 'total_legacy'],
                axisSite: { left: ['new_create', 'resolved', 'closed'], right: ['total_new', 'total_resolved', 'total_closed', 'total_legacy'] },
                yAxisType: ['normal', 'normal'],
                yAxisName: ['个数', '累计个数'],
                labelMap: {
                    'total_new': '累计新增',
                    'total_resolved': '累计解决',
                    'total_closed': '累计关闭',
                    'total_legacy': '累计遗留',
                    'new_create': '新增',
                    'resolved': '解决',
                    'closed': '关闭'
                },
            },
            chartDailyData: {
                columns: ['date', 'new_create', 'resolved', 'closed', 'total_new', 'total_resolved', 'total_closed', 'total_legacy'],
                rows: []
            },
            currentPage: 1,
            total: 0,
            pageSize: 10,
        }
    },
    watch: {
        filters: {
            handler: function() {
                this.getData();
            },
            deep: true,
        },
    },
    methods: {
        getBugDaily(project, time) {
            var source = '/api/qa/projbugconvergence?projectId=';
            source = source+project+'&time='+time;
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.status == 200) {
                            if (response.data.code == 200) {
                                this.chartDailyData.rows = response.data.data;
                                this.total = this.chartDailyData.rows.length;
                            }
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err)
                });
        },
        getData() {
            let time = this.filters.time
            if (time == null || typeof(time) == "undefined") {
                time = ''
            }
            this.getBugDaily(this.filters.projectId, time)
        },
        isDisplay(data) {
            if (data && data.length != 0) {
                return true;
            } else {
                return false;
            }
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.currentPage = val
        }
        
    },
    created: function() {
        // this.project_id = this.$route.params.pmsProjectId;
    },
    mounted: function() {
        this.getData()
    }
}
</script>
<style lang="scss" scoped>
    @import '../../../assets/common/common.scss';

    .data-empty {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .7);
    color: #888;
    font-size: 14px;
    }
</style>